{% load static %}
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
          integrity = "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
          crossorigin = "anonymous">

    <title>Title</title>
</head>
<body>
    <div class = "container">
        <div class = "col-sm-2" id = "left-content">
            <div class = "panel-group" id = "accordion1">

                <!--我的订单-->
                <div class = "panel panel-default">
                    <div class = "panel panel-heading">
                        <h4 class = "panel-title" style = "text-align: center;">
                            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseOne">我的订单</a>
                        </h4>
                    </div>
                    <div id = "collapseOne" class = "panel-collapse collapse">
                        <div class = "panel-body">
                            <div class = "col-sm-12 left-menu"><a href = "javascript:;"
                                                                  onclick = "turnpage('/webtest/page1/')">美食订单</a></div>
                        </div>
                    </div>
                </div>
                <!--我的评价-->
                <div class = "panel panel-default">
                    <div class = "panel panel-heading">
                        <h4 class = "panel-title" style = "text-align: center;">
                            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseTwo">我的评价</a>
                        </h4>
                    </div>
                    <div id = "collapseTwo" class = "panel-collapse collapse">
                        <div class = "panel-body">
                            <div class = "col-sm-12 left-menu"><a href = "javascript:;" onclick = "turnpage('/webtest/page2/')">待评价</a>
                            </div>
                            <div class = "col-sm-12 left-menu"><a href = "javascript:;" onclick = "turnpage('/webtest/page3/')">已评价</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class = "col-sm-10" id = "right-content">
            <div class = "mainbox">

            </div>
        </div>
    </div>

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src = "{% static 'js/jquery-3.5.1.js' %}" ></script>
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>


    <script>
        function turnpage(url) {

            var newurl = url;
            history.pushState(null, null, newurl);
            <!--var ajaxurl = url + '.html'-->
            $.ajax({
                type: "post",
                url: newurl,
                async:true,
                success: function (html) {
                    $('.mainbox').html(html);
                }
            });
        }
    </script>

</body>
</html>